<template>
  <div class="login-page">
    <el-card>
      <div class="avatar">
        <el-avatar
          :size="96"
          src="http://likede2-admin.itheima.net/img/logo.595745bd.png"
          fit="fill"
        ></el-avatar>
      </div>
      <el-form
        autocomplete="off"
        @submit="onSubmit"
        :rules="loginFormRules"
        :model="loginForm"
        ref="form"
      >
        <el-form-item prop="loginName">
          <el-input
            placeholder="输入用户名"
            v-model="loginForm.loginName"
            style="fontsize: 16px; lineheight: 50px"
          >
            <template #prefix><i class="el-icon-mobile-phone"></i></template>
          </el-input>
        </el-form-item>

        <el-form-item prop="password">
          <el-input
            type="password"
            placeholder="输入密码"
            v-model="loginForm.password"
            style="fontSize: 16px; lineHeight: 50px"
            show-password
          >
            <template #prefix><i class="el-icon-lock"></i></template
          ></el-input>
        </el-form-item>
        <el-form-item prop="clientToken">
          <el-input
            placeholder="输入验证码"
            v-model="loginForm.code"
            autocomplete="off"
            class="clientToken"
            style="fontSize: 16px; lineHeight: 50px"
          >
            <template #prefix><i class="el-icon-cherry"></i></template>
          </el-input>
            <div @click="refreshCode" class="imgCode">
                <img data-v-26affb70="" :src="imgURL" />
              </div>
        </el-form-item>
        <el-form-item class="tc">
          <el-button type="primary" @click.native.prevent="onSubmit" style="width:100%"
            >登 录</el-button
          >
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
import { getCodeImg } from '@/api/user'

export default {
  name: 'login-page',
  data () {
    return {
      codeUrl: '',
      imgURL: '',
      loginForm: {
        clientToken: '',
        loginName: 'admin',
        password: 'admin',
        loginType: 0,
        code: ''// 输入input框的验证码
      },
      loginFormRules: {
        code: [
          { required: true, message: '请输入图片验证码', trigger: 'blur' }
        ],
        loginName: [
          { required: true, message: '请输入用户名', trigger: 'blur' }

        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          {
            min: 5,
            max: 18,
            message: '长度在 5 到 18 个字符',
            trigger: 'change'
          }
        ]
      }
    }
  },
  mounted () {
    this.refreshCode()
  },
  methods: {
    async refreshCode () {
      this.loginForm.clientToken = this.getRandom()
      const res = await getCodeImg(this.loginForm.clientToken)
      this.imgURL = URL.createObjectURL(res)
    },
    async onSubmit () {
      try {
        await this.$refs.form.validate()
        await this.$store.dispatch('user/loginActions', this.loginForm)
        this.$router.push('/')
      } catch (e) {
        console.log(e)
      } finally {
        this.$message.success('请求成功')
      }
    },
    getRandom () {
      return Math.random().toString(36).slice(2)
    }
  }
}
</script>

<style lang="scss" scoped>
.login-page {
  min-height: 100vh;
  background: url(http://likede2-admin.itheima.net/img/background.be4fae7d.png)
    no-repeat center / cover;
  display: flex;
  align-items: center;
  justify-content: space-around;
  ::v-deep .el-card {
    position: relative;
    padding: 76px 35px 0;
    overflow: visible;
    .avatar {
      // height: 50px;
      // width: 50px;
      position: absolute;
      top: -45px;
      left: 230px;
      z-index: 99999999;
    }
  }
  .el-form {
    height: 312px;
    width: 448px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: start;
    // ::v-deep .el-input__inner {
    //   height: 50px;
    //   width: 200%;
    .el-form-item{
      width: 450px;
      height: 50px;
      ::v-deep .el-input--prefix .el-input__inner {
        height: 50px;
        line-height: 45px;
      }
      .imgCode{
        position: absolute;
        top:0px;
        left:320px;
        height: 100%;
        width: 130px;
      }
    }
  }
  .tc {
    text-align: center;
  }
}
</style>
